<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery-2.1.1.min.js"></script>
    <script src="/js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/js/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/js/bootstrap-table/bootstrap-table.js"></script>
    <link rel="stylesheet" href="/js/bootstrap-table/bootstrap-table.css">
    <script src="/js/bootstrap-bootbox/bootbox.js"></script>
    <script src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
</head>
 <script  type="text/javascript" >
     $(function(){
         queryAll();
     });

     function getUI(url){
         var content ="" ;
         $.ajax({
             url:"../view/toView?viewName=/"+url,
             async:false,
             success:function(result){
                 content= result;
             },
             error:function(){
                 alert("ajax访问失败了,查看控制台");
             }
         });
         return content;
     }

     function  queryAll(){

         $("#table").bootstrapTable({
             url:'../elast/queryAll',
             striped: true,  //表格显示条纹，默认为false
             toolbar:'#tb',
             pagination:true,
             pageList:[1,2,3,4,5,6,7,8,9,10],
             pageSize:3,
             checkOnSelect:false,
             sidePagination: 'server', // 设置为服务器端分页(!!!!)
             queryParams: function (params) {
                 // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                 return {
                     rows:params.limit, // 每页要显示的数据条数
                     page:(params.offset/params.limit)+1, // 每页显示数据的开始行号
                     str:$("#str").val(),
                 }
             },
             columns:[
                 {field:'id',title:'ID',align:'center',valign:'middle'},
                 {field:'username',title:'用户名字',align:'center',valign:'middle'},
                 {field:'userage',title:'用户年龄',align:'center',valign:'middle'},
                 {field:'cz',title:'操作',align:'center',valign:'middle',formatter:function (value,row,index) {
                         var content="";
                         content+="  <a href='javascript:void(0)' onclick=deleteUser('"+row.id+"')>删除</a>";
                         return content;
                     }},
             ],
             onLoadSuccess: function(){
                 console.info("加载成功");
             },
             onLoadError: function(){
                 console.info("加载数据失败");
             }
         });
     }

     function  deleteUser(id){

         $.ajax({
            url:"../elast/deleteUser/"+id,
            type:"POST",
            async:false,
            success:function(res){
                setTimeout("$('#table').bootstrapTable('refresh')",1000);
            }
          });
     }

     function  addUser(){
         bootbox.dialog({
             size: "big",
             title:'添加用户',
             message:getUI("table"),
             closeButton:true,
             //className:'add-dialog',
             buttons:{
                 'success':{
                     "label" : "<i class='icon-ok'></i> 保存",
                     "className" : "btn-sm btn-success",
                     "callback" : function() {
                         $.ajax({
                             url:"../elast/addElast",
                             type:"POST",
                             async:false,
                             data:$("#form").serialize(),
                             success:function(result){
                                 setTimeout("$('#table').bootstrapTable('refresh')",1000);
                             },
                             error:function(){
                                 alert("ajax访问失败了,查看控制台");
                             }
                         });
                     }
                 },
                 'cancel':{
                     "label" : "<i class='icon-info'></i> 取消",
                     "className" : "btn-sm btn-danger",
                     "callback":function(){
                     }
                 }
             }
         })
     }
 </script>
<body><br/><center>
    <div  id="td">

      <input type="text" class="form-control" style="width:300px" id="str"  placeholder="全局搜索"  ><br/>
    </div>
      <button onclick="$('#table').bootstrapTable('refresh')" class="btn btn-info">搜索</button></center><br/>

    <button onclick="addUser()" class="btn btn-info">新增</button>
    <table id="table"  class="table  table-responsive" ></table>

</body>
</html>